<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">	
<title>员工</title>
<script th:src="@{css.js}"></script>
</head>
<body>
<hr />
<div class="page-container">
	<table class="table table-border table-bordered table-bg table-hover table-sort" id="table">
		<tr class="text-c">
		<th width="25"><input name="" type="checkbox" value=""></th>
		<th>ID</th><th>姓名</th><th>密码</th><th>昵称</th><th>工号</th><th>工资</th><th>部门</th><th>电话号码</th><th>住址</th><th>状态</th><th width="100">操作</th>
		</tr>
			<tr class="text-c" th:each="user:${session.Employees}">
					<td><input name="" type="checkbox" value=""></td>
					<td><span th:text="${user.id}"></span></td>
					<td><span th:text="${user.name}"></span></td>
					<td><span th:text="${user.password}"></span></td>
					<td><span th:text="${user.nickname}"></span></td>
					<td><span th:text="${user.jobNumber}"></span></td>
					<td><span th:text="${user.salary}"></span></td>
					<td><span th:text="${user.section}"></span></td>
					<td><span th:text="${user.number}"></span></td>
					<td><span th:text="${user.address}"></span></td>
					
					<td class="td-status"><span class="label label-success radius"><span th:text="${user.state}"></span> </span></td>
					<td class="td-manage">
					<a style="text-decoration:none" th:onClick="user_stop(this,'[[${user.id}]]')" href="javascript:;" title="停用">
					<i class="Hui-iconfont">&#xe631;</i></a>
					
					<a style="text-decoration:none" class="ml-5"  th:onClick="user_edit('编辑员工资料','employee_edit',[[${user.id}]])" href="javascript:;" title="编辑">
					<i class="Hui-iconfont">&#xe6df;</i></a>
					<a style="text-decoration:none" class="ml-5" th:onclick="user_del([[${user.id}]])" href="javascript:;" title="删除">
					<i class="Hui-iconfont">&#xe6e2;</i></a>
					<a style="text-decoration:none" th:onClick="user_start(this,'[[${user.id}]]')" href="javascript:;" title="启用">
					<i class="Hui-iconfont">&#xe601;</i></a>
					</td>
				</tr>
			
		
	</table>
	<a style="text-decoration:none" class="ml-5" th:onClick="user_add('添加员工','employ_add')" href="javascript:;" title="添加">
					<i class="Hui-iconfont">&#xe600;</i></a>
</div>

 
	<script src="<%=path%>/quiet/css/kkpager/kkpager.js"></script>
 
 <script type="text/javascript" th:inline="javascript">
 /* 编辑弹出页面 */
	function user_edit(title,url,id){
		var index=layer.open({
			/* type:2,表里面出现一个iform */
			type:2,
			title:title,
			content:url+"?id="+id	//导致ajax	
			});
		layer.full(index);
	}
 </script>
 <script type="text/javascript">
	function user_add(title,url){
		var index=layer.open({
			/* type:2,表里面出现一个iform */
			type:2,
			title:title,
			content:url	//导致ajax	
			});
		layer.full(index);
	}
 </script>
<script type="text/javascript">
function user_del(id){
	if(confirm("是否删除id为"+id+"的用户么？")){
		 $.ajax({
			 'url':"employ_del",
			 'data':{
				 'id':id
			 },
		 'dataType':"text",
		 'type':"POST",
		 'success':function(data){
			 if(data=="ok"){
				 alert("成功删除");
				 $("#table"+id).remove();  
				 window.location.reload()
			 }
			 else alert("删除失败");
		 
		 }
	 });
}
}
</script>
<script type="text/javascript">
function user_stop(obj,id){
	layer.confirm('确认要停用吗？',function(index){
		$.ajax({
			type: 'POST',
			url: 'employ_stop',
			dataType: 'text',
			 'data':{
				 'id':id
			 },
			success: function(data){
				if(data=='ok'){
					$(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="employ_start(this,'+id+')" href="javascript:;" title="启用"><i class="Hui-iconfont">&#xe6e1;</i></a>');
					$(obj).parents("tr").find(".td-status").html('<span class="label label-defaunt radius">已停用</span>');
					$(obj).remove();
					layer.msg(data,{icon: 5,time:1000});
				}
				
			},
			error:function(data) {
				console.log(data.msg);
			},
		});		
	});
}
function user_start(obj,id){
	layer.confirm('确认要启用吗？',function(index){
		$.ajax({
			type: 'POST',
			url: 'employ_start',
			dataType: 'text',
			data:{
				 'id':id
			 },
			success: function(data){
				if(data=='ok'){
				$(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="employ_stop(this,id)" href="javascript:;" title="停用"><i class="Hui-iconfont">&#xe631;</i></a>');
				$(obj).parents("tr").find(".td-status").html('<span class="label label-success radius">已启用</span>');
				$(obj).remove();
				layer.msg('已启用!',{icon: 6,time:1000});
				}
			},
			error:function(data) {
				console.log(data.msg);
			},
		});
	});
}
</script>
<script th:src="@{js.js}"></script>

</body>
</html>